<template>
  <Layout>
    <Aside
      slot="aside"
      :data="menuData"
      @menu-item="handleMenuItem"
    ></Aside>
    <router-view></router-view>
  </Layout>
</template>

<script>
import Layout from "@/components/layout";
import Aside from "@/components/aside";

import { createAsideMenu, hasPermission } from "@/utils";

export default {
  components: {
    Aside,
    Layout
  },
  data() {
    return {
      menuData: []
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(route) {
        let childrenData = createAsideMenu(
          "other",
          route.name
        );
        this.menuData = [
          {
            name: "账户内部审核管理",
            icon: "iconfont iconfont-14",
            isOpen: route.name.includes("account-audit"),
            children: childrenData.filter(item =>
              item.pathName.includes("account-audit")
            ),
            meta: {
              permission: "other_aptitudeAudit_page"
            }
          },
          {
            name: "物料内部审核管理",
            icon: "iconfont iconfont-14",
            isOpen: route.name.includes("creative-audit"),
            children: childrenData.filter(item =>
              item.pathName.includes("creative-audit")
            ),
            meta: {
              permission: "other_creativeAudit_page"
            }
          },
          {
            name: "权限管理",
            pathName: "other-role",
            icon: "iconfont iconfont-14",
            isActive: route.name.includes("role"),
            meta: {
              permission: "other_permissionsManage_page"
            }
          },
          // {
          //   name: "模板管理",
          //   pathName: "other-template",
          //   icon: "iconfont iconfont-14",
          //   isActive: route.name.includes("template"),
          //   meta: {
          //     permission: "other_templateManage_page"
          //   }
          // }
        ].filter(item => hasPermission([item.meta.permission]));
      }
    }
  },
  methods: {
    // 菜单项点击
    handleMenuItem({ item }) {
      if (item.pathName) {
        this.$router.push({
          name: item.pathName
        });
      }
    }
  }
};
</script>